<template>
  <a-row
    :gutter="10"
    class="container"
  >
    <a-col
      :md="12"
      :sm="24"
    >
      <a-form
        :model="formState"
        class="container-form"
        layout="inline"
        @keyup.enter.native="handleSearch"
        @keyup.esc.native="handleReset"
      >
        <a-form-item label="网关号">
          <a-input
            v-model:value="formState.imei"
            allowClear
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item>
          <a-space>
            <a-button
              type="primary"
              :loading="searchLoading"
              @click="handleSearch"
            >
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button
              :loading="resetLoading"
              @click="handleReset"
            >
              <template #icon>
                <RedoOutlined />
              </template>
              重置
            </a-button>
          </a-space>
        </a-form-item>
      </a-form>

      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        :pagination="pagination"
        :rowSelection="rowSelection"
        :scroll="{ x: 'max-content', y: tableScrollY }"
        :customRow="customRow"
        bordered
        class="container-table left-table"
        rowKey="id"
        @change="tableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status ? 'green' : 'red'">
              {{ record.status ? '在线' : '离线' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <template v-if="record.status">
              <!--              <a-button-->
              <!--                type="link"-->
              <!--                @click.stop="handleSyncTime(record)"-->
              <!--              >-->
              <!--                <template #icon>-->
              <!--                  <SyncOutlined />-->
              <!--                </template>-->
              <!--                同步-->
              <!--              </a-button>-->
              <!--              <a-divider type="vertical" />-->
              <a-button
                type="link"
                @click.stop="handleUpdate(record)"
              >
                <template #icon>
                  <EditOutlined />
                </template>
                更新
              </a-button>
            </template>
            <template v-else>--</template>
          </template>
        </template>
      </a-table>
    </a-col>

    <MeterList :activeImei="selectedRow.imei" />

    <GatewayModal ref="modal" />
  </a-row>
</template>
<script setup>
import { useFormSearch, useTableList } from '@/hooks'
import MeterList from './meterList.vue'
import GatewayModal from './src/gatewayModal.vue'

const columns = [
  {
    title: '网关名称',
    align: 'center',
    dataIndex: 'name',
  },
  {
    title: '网关号',
    align: 'center',
    dataIndex: 'imei',
  },
  {
    title: '网关状态',
    align: 'center',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '更新时间',
    align: 'center',
    dataIndex: 'updatedAt',
  },
  {
    title: '创建时间',
    align: 'center',
    dataIndex: 'createdAt',
  },
  {
    title: '操作',
    align: 'center',
    key: 'action',
    fixed: 'right',
    // width: 180,
  },
]

const { loading, dataSource, pagination, selectedRow, rowSelection, tableScrollY, getList, tableChange, customRow } =
  useTableList('/gateway/page', {
    useRadioSelect: true,
    tableSelector: '.left-table',
  })

const { formState, searchLoading, resetLoading, handleSearch, handleReset } = useFormSearch({ imei: '' }, getList)

getList()

const modal = ref()
// const handleSyncTime = record => {}
const handleUpdate = record => {
  modal.value.handleUpdate(record)
}
</script>
<style lang="scss" scoped></style>
